/**
 * 蛇模块
 */

export default class Snake{
    head: HTMLElement;
    // 包括蛇头
    bodies: HTMLCollection;
    element: HTMLElement;
    constructor(){
        this.element = document.getElementById('snake')!;
        this.head = document.querySelector('#snake > div')!;
        this.bodies = document.getElementById('snake')!.getElementsByTagName('div');
    }

    get X(){
        return this.head.offsetLeft;
    }

    get Y(){
        return this.head.offsetTop;
    }

    set X(value:number){
        if(this.X === value){
            return;
        }
        if(value < 0 || value > 290){
            throw new Error('蛇撞墙了');
        }
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value){
            if(value > this.X){
                value = this.X -10;
            } else {
                value = this.X + 10;
            }
        }
        this.moveBody();
        this.head.style.left = value + 'px';
        this.chexkHeadBody();
    }

    set Y(value:number){
        if(this.Y === value){
            return;
        }
        if(value < 0 || value > 290){
            throw new Error('蛇撞墙了');
        }
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
            if(value > this.Y){
                value = this.Y -10;
            } else {
                value = this.Y + 10;
            }
        }
        this.moveBody();
        this.head.style.top = value + 'px';
        this.chexkHeadBody();
    }

    addBody(){
        this.element.insertAdjacentHTML("beforeend",'<div></div>');
    }

    moveBody(){
        // 身体从后往前改，占领前一个位置
        for(let i = this.bodies.length - 1; i > 0; i--){
            let x = (this.bodies[i-1] as HTMLElement).offsetLeft;
            let y = (this.bodies[i-1] as HTMLElement).offsetTop;
            (this.bodies[i] as HTMLElement).style.left = x + 'px';
            (this.bodies[i] as HTMLElement).style.top = y + 'px';
        }
    }

    chexkHeadBody(){
        for(let i = 1; i < this.bodies.length; i++){
            let x = (this.bodies[i] as HTMLElement).offsetLeft;
            let y = (this.bodies[i] as HTMLElement).offsetTop;
            if(this.X === x && this.Y === y){
                throw new Error('蛇头撞到身体！');
                
            }
        }
    }
}
